<template>
  <el-form
      class="login-form"
      :rules="rules"
      ref="form"
      :model="user"
      size="medium"
      @submit.prevent="handleSubmit"
  >
    <el-form-item prop="username">
      <el-input v-model="user.username" placeholder="请输入用户名">
        <template #prefix>
          <el-icon class="el-input__icon">
            <User/>
          </el-icon>
        </template>
      </el-input>
    </el-form-item>
    <el-form-item prop="password">
      <el-input v-model="user.password" type="password" placeholder="请输入密码">
        <template #prefix>
          <el-icon class="el-input__icon">
            <lock/>
          </el-icon>
        </template>
      </el-input>
    </el-form-item>
    <el-form-item>
      <el-button
          class="submit-button"
          type="primary"
          :loading="loading"
          native-type="submit"
      >
        登录
      </el-button>
    </el-form-item>
  </el-form>

  <div style="font-size: 14px;color: #8c939d;display: flex;justify-content: space-around;width: 350px;">
    <span>测试账号：<strong>test</strong></span>
    <span>密码：<strong>123456</strong></span>
  </div>
</template>

<script lang="ts" setup>
import {ref, reactive} from 'vue';
import {login} from '@/api/common';
import {ElMessage} from 'element-plus';
import {store} from '@/store';
import {useRouter, useRoute} from 'vue-router';
import type {IElForm, IFormRule} from '@/types/element-plus';
import {ILoginForm} from "@/api/types/common";

const route = useRoute();
const router = useRouter();
const form = ref<IElForm | null>(null);
const user = reactive<ILoginForm>({
  username: '',
  password: ''
});
const loading = ref(false);
const rules = ref<IFormRule>({
  username: [
    {
      required: true,
      message: '请输入账号',
      trigger: 'change',
    },
  ],
  password: [
    {
      required: true,
      message: '请输入密码',
      trigger: 'change',
    },
  ],
});


const handleSubmit = async () => {
  console.log('handleSubmit');
  const valid = await form.value?.validate();
  if (!valid) {
    return;
  }

  loading.value = true;
  try {
    const data = await login(user);
    if (!data) {
      return;
    }
    await store.dispatch('user/login', data)
    ElMessage.success('登录成功');
    // 跳转回原来页面
    let redirect = route.query.redirect || '/';
    if (typeof redirect !== 'string') {
      redirect = '/';
    }
    await router.replace(redirect);
  } catch (err) {
    console.log('登录失败！', err)
  }
  loading.value = false;
};
</script>

<style lang="scss" scoped>

.login-form {
  padding: 30px;
  border-radius: 6px;
  background: #fff;
  min-width: 310px;

  .login-form__header {
    display: flex;
    justify-content: center;
    align-items: center;
    padding-bottom: 30px;
  }

  .el-form-item:last-child {
    margin-bottom: 0;
  }

  .login__form-title {
    display: flex;
    justify-content: center;
    color: #fff;
  }

  .submit-button {
    width: 100%;
  }

  .login-logo {
    width: 271px;
    height: 74px;
  }

  .imgcode-wrap {
    display: flex;
    align-items: center;

    .imgcode {
      height: 37px;
    }
  }
}
</style>
